import React, { useLayoutEffect } from "react";
import { Root, Tooltip, percent } from "@amcharts/amcharts5";
import {
  ValueAxis,
  AxisRendererX,
  AxisRendererY,
  GaplessDateAxis,
  CandlestickSeries,
  XYCursor,
  XYChartScrollbar,
  LineSeries,
} from "@amcharts/amcharts5/xy";
import { StockChart, StockPanel, StockLegend } from "@amcharts/amcharts5/stock";
import AnimatedTheme from "@amcharts/amcharts5/themes/Animated";

export interface StockProps {
  data: {
    Date: number;
    Open: number;
    High: number;
    Low: number;
    Close: number;
    Volume: number;
  }[];
}

export const Stock: React.FC<StockProps> = ({ data = [] }) => {
  useLayoutEffect(() => {
    if (data.length === 0) return;

    const root = Root.new("stock");
    // Set themes
    root.setThemes([AnimatedTheme.new(root)]);

    // Create a stock chart
    const stockChart = root.container.children.push(StockChart.new(root, {}));

    // Set global number format
    root.numberFormatter.set("numberFormat", "#,###.00");

    // Create a main stock panel (chart)
    const mainPanel = stockChart.panels.push(
      StockPanel.new(root, {
        wheelY: "zoomX",
        panX: true,
        panY: true,
        height: percent(70),
      })
    );

    // Create axes
    const valueAxis = mainPanel.yAxes.push(
      ValueAxis.new(root, {
        renderer: AxisRendererY.new(root, {
          pan: "zoom",
        }),
        tooltip: Tooltip.new(root, {}),
        numberFormat: "#,###.00",
        extraTooltipPrecision: 2,
      })
    );

    const dateAxis = mainPanel.xAxes.push(
      GaplessDateAxis.new(root, {
        baseInterval: {
          timeUnit: "day",
          count: 1,
        },
        groupData: true,
        renderer: AxisRendererX.new(root, {}),
        tooltip: Tooltip.new(root, {}),
      })
    );

    // Add series
    const valueSeries = mainPanel.series.push(
      CandlestickSeries.new(root, {
        name: "MSFT",
        valueXField: "Date",
        valueYField: "Close",
        highValueYField: "High",
        lowValueYField: "Low",
        openValueYField: "Open",
        calculateAggregates: true,
        xAxis: dateAxis,
        yAxis: valueAxis,
        legendValueText: "{valueY}",
      })
    );

    // Set main value series
    stockChart.set("stockSeries", valueSeries);

    // Add a stock legend
    const valueLegend = mainPanel.plotContainer.children.push(
      StockLegend.new(root, {
        stockChart: stockChart,
      })
    );
    valueLegend.data.setAll([valueSeries]);

    // Add cursor(s)
    mainPanel.set(
      "cursor",
      XYCursor.new(root, {
        yAxis: valueAxis,
        xAxis: dateAxis,
        snapToSeries: [valueSeries],
        snapToSeriesBy: "y!",
      })
    );

    // Add scrollbar
    const scrollbar = mainPanel.set(
      "scrollbarX",
      XYChartScrollbar.new(root, {
        orientation: "horizontal",
        height: 50,
      })
    );
    stockChart.toolsContainer.children.push(scrollbar);

    const sbDateAxis = scrollbar.chart.xAxes.push(
      GaplessDateAxis.new(root, {
        baseInterval: {
          timeUnit: "day",
          count: 1,
        },
        renderer: AxisRendererX.new(root, {}),
      })
    );
    const sbValueAxis = scrollbar.chart.yAxes.push(
      ValueAxis.new(root, {
        renderer: AxisRendererY.new(root, {}),
      })
    );
    const sbSeries = scrollbar.chart.series.push(
      LineSeries.new(root, {
        valueYField: "Close",
        valueXField: "Date",
        xAxis: sbDateAxis,
        yAxis: sbValueAxis,
      })
    );

    sbSeries.fills.template.setAll({
      visible: true,
      fillOpacity: 0.3,
    });

    // set data
    valueSeries.data.setAll(data);
    sbSeries.data.setAll(data);
  }, [data]);
  return <div id="stock" style={{ width: "100%", height: 300 }} />;
};
export default Stock;
